<div class="w-full h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-11.65rem)] overflow-y-auto border rounded-lg enclosing-container">
  <div class="p-4">
    <p class="text-lg pb-4 pt-4 ">
      Book Reader Settings: Global or Per-Book
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Select whether to apply the same reader settings (font, theme, spread, zoom, etc.) globally for all books or individually per book."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
      <p class="py-1">PDF:</p>
      <div class="flex gap-4 justify-start">
        @for (item of scopeOptions; track item) {
          <div class="flex items-center gap-2">
            <p-radiobutton
              [inputId]="item"
              name="spread"
              [value]="item"
              [(ngModel)]="selectedPdfScope"
              (ngModelChange)="onPdfScopeChange()">
            </p-radiobutton>
            <label [for]="item">{{ item }}</label>
          </div>
        }
      </div>
      <p class="py-1">Epub:</p>
      <div class="flex gap-4 justify-start">
        @for (item of scopeOptions; track item) {
          <div class="flex items-center gap-2">
            <p-radiobutton
              [inputId]="item"
              name="spread"
              [value]="item"
              [(ngModel)]="selectedEpubScope"
              (ngModelChange)="onEpubScopeChange()">
            </p-radiobutton>
            <label [for]="item">{{ item }}</label>
          </div>
        }
      </div>
      <p class="py-1">CBX:</p>
      <div class="flex gap-4 justify-start">
        @for (item of scopeOptions; track item) {
          <div class="flex items-center gap-2">
            <p-radiobutton
              [inputId]="item"
              name="spread"
              [value]="item"
              [(ngModel)]="selectedCbxScope"
              (ngModelChange)="onCbxScopeChange()">
            </p-radiobutton>
            <label [for]="item">{{ item }}</label>
          </div>
        }
      </div>
    </div>
  </div>
  <p-divider></p-divider>

  <app-epub-reader-preferences-component
    [userSettings]="userSettings">
  </app-epub-reader-preferences-component>

  <p-divider></p-divider>

  <app-pdf-reader-preferences-component
    [userSettings]="userSettings">
  </app-pdf-reader-preferences-component>

  <p-divider></p-divider>

  <app-cbx-reader-preferences-component
    [userSettings]="userSettings">
  </app-cbx-reader-preferences-component>

</div>
